<template>
    <div class="examcard"  @click="getExamlist">
        <img :src="'http://121.89.232.163'+examdata.pic_url">
        <div class="examinfo">
            <div class="title">{{examdata.name}}</div>
            <div class="littletitle">{{examdata.describe}}</div>
        </div>
        <div class="examinfo_send">
            <div class="line"></div>
            <div class="price">{{'￥'+examdata.price}}</div>
            <div class="examtatol">{{examdata.question_num+'题'}}</div>
            <div class="peoples">{{examdata.answered_num+'人已答'}}</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        props:['examdata','categorynum'],
        data() {
            return {
            
            }
        },
        methods:{
           getExamlist(){
                //console.log(this.examdata.zid)
                //console.log(this.categorynum)
                axios.get(`http://121.89.232.163/api/exarcisek/v1/get_examination_paper_topic_list/?examination_paper_zid=${this.examdata.zid}&practice_type=${this.categorynum}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    //console.log(res.data.data)
                    this.$router.push({path:'/daily',query:{dailydata:res.data.data,practice_type:this.categorynum}})
                })
           }
        },
    }
</script>

<style scoped>
.examcard{
    position: relative;
    width: 281px;
    height: 338px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(222,222,222,0.5);
    margin-bottom: 23px;
    cursor: pointer;
}
.examinfo{
    position: absolute;
    width: 281px;
    height: 197px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, #FFFFFF 20%);
    bottom: 0;
    transition: 0.5s;
}
.examinfo:hover{
    transform: translateY(-17px);
}
.title{
    margin-left: 26px;
    margin-top: 26px;
    width: 226px;
    height: 47px;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.littletitle{
    width: 132px;
    height: 17px;
    margin-left: 26px;
    margin-top: 15px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    user-select: none;
}
.line{
    width: 230px;
    height: 1px;
    margin-left: 26px;
    margin-top: 19px;
    background: #F2F2F2;
}
.price{
    display: inline-block;
    width: 68px;
    height: 21px;
    margin-left: 26px;
    margin-top: 22px;
    margin-right: 27px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FF1A9A;
    line-height: 21px;
    user-select: none;
}
.examtatol{
    display: inline-block;
    width: 31px;
    height: 20px;
    margin-top: 23px;
    margin-right: 26px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #939393;
    line-height: 20px;
    user-select: none;
}
.peoples{
    display: inline-block;
    width: 78px;
    height: 20px;
    margin-top: 23px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #939393;
    line-height: 20px;
    user-select: none;
}
.examinfo_send{
    position: absolute;
    top: 255px;
    left: 0;
}
img{
    width: 281px;
    height: 321px;
}
</style>
